<template>
	<view>
		<u-row style="padding: 16px; box-sizing: border-box; padding-bottom: 0px;">
			<u-button style="width: 100%;" size="medium" type="primary" @click="toAddStaff">
				员工入职
			</u-button>
		</u-row>
		<u-empty v-if="!staffList || staffList.length < 1" text="暂无数据" mode="list"></u-empty>
		<u-card
			v-for="(item,index) in staffList"
			:title="item.realname"
			:sub-title="item.jointime_text"
		>
			<view class="" slot="body">
				<u-row>
					<view class="u-body-item-title u-line-2">真实姓名：{{ item.realname }}</view>
				</u-row>
				<u-row style='margin-top: 8px;'>
					<view class="u-body-item-title u-line-2">手机号：{{ item.mobile }}</view>
				</u-row>
			</view>
			<view class="" slot="foot">
				<u-row justify="flex-end" gutter="16">
					<u-button
						@click="toLeaveStaff(item)"
						type="error"
						size="medium"
					>
						员工离职
					</u-button>
					<u-button
						@click="getStaffHour(item)"
						type="primary"
						size="medium"
					>
						查看工时
					</u-button>
				</u-row>
			</view>
		</u-card>
		<u-loadmore :status="loadMoreStatus" icon-type="flower" :load-text="loadText" />
		<!-- 员工入职Modal -->
		<u-modal
			title="员工入职"
			v-model="addStaffVisible"
			show-cancel-button
			@confirm="addStaff"
		>
			<u-field
				v-model="addStaffData.real_name"
				label="真实姓名"
				placeholder="请填写真实姓名"
			>
			</u-field>
			<u-field
				v-model="addStaffData.mobile"
				label="手机号"
				placeholder="请输入手机号"
			>
			</u-field>
		</u-modal>
		<!-- 员工离职Modal -->
		<u-modal
			title="员工离职"
			v-model="leaveStaffVisible"
			@confirm="leaveStf"
			show-confirm-button
			show-cancel-button
			confirm-text="离职"
			confirm-color="#fa3534"
		>
			<u-row style="padding: 16px; box-sizing: border-box;">
				确定要为员工：{{ currentStaff.realname }} 操作离职吗？
			</u-row>
		</u-modal>
		<u-modal
			title="员工工时"
			v-model="staffHourVisible"
		>
			<row style="padding: 16px; box-sizing: border-box;">
				{{ staffHourContent }}
			</row>
			<!-- <u-row style="padding: 16px; box-sizing: border-box;">
				确定要为员工：{{ currentStaff.realname }} 操作离职吗？
			</u-row> -->
		</u-modal>
		<!-- <addStaff :modalShow="addStaffVisible" @close="() => { addStaffVisible = false }" /> -->
	</view>
</template>

<script>
	import { getStaffs, signStaff, leaveStaff, staffHour } from '../../util/request.js'
	import addStaff from './components/addStaff.vue'
	export default {
		data() {
			return {
				loadMoreStatus: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				staffHourContent: '', // 员工工时
				staffHourData: {
					user_id: '',
				},
				staffHourVisible: false,
				currentStaff: {
					realname: '',
				},
				leaveStaffVisible: false,
				leaveStaffData: {
					factory_id: '',
					user_id: ''
				},
				addStaffData: {
					real_name: '', // 员工姓名
					mobile: '', // 员工银行卡后6位
					factory_id: ''
				},
				addStaffVisible: false,
				factoryId: '',
				staffList: [],
				total: 0,
				searchParams: {
					limit: 10,
					page: 1,
					factory_id: ''
				}
			};
		},
		components: {
			addStaff
		},
		onLoad(options) {
			this.factoryId = options.factory_id
		},
		created() {
			this.initData()
		},
		onReachBottom() {
			this.loadMoreStatus = 'loading'
			this.searchParams.page++
			this.initData()
			// setTimeout(() => {
			// 	this.list += 10;
			// 	if(this.page >= 3) this.status = 'nomore';
			// 	else this.status = 'loading';
			// }, 2000)
		},
		methods: {
			initData () {
				this.searchParams.factory_id = this.factoryId
				getStaffs(this.searchParams).then(res => {
					// current_page: 1
					// data: Array(2)
					// last_page: 1
					// per_page: 15
					// total: 2
					this.loadMoreStatus = 'loadmore'
					const { current_page, last_page, per_page, total } = res.data.data
					if (this.searchParams.limit * this.searchParams.page >= total) {
						// 已经是最后一页了
						this.loadMoreStatus = 'nomore'
					}
					this.total = total
					this.staffList = [ ...this.staffList, ...res.data.data.data ]
				})
			},
			toAddStaff () {
				this.addStaffVisible = true
			},
			addStaff () {
				uni.showLoading({
					title: '正在请求服务器'
				})
				if (this.addStaffData.mobile === '' || this.addStaffData.real_name === '') {
					uni.showToast({
						icon: 'error',
						title: '真实姓名或手机号不能为空！'
					})
					return
				}
				// 给工厂id赋值
				this.addStaffData.factory_id = this.factoryId
				signStaff(this.addStaffData).then(res => {
					const { data, code, msg } = res.data
					if (code === 0) {
						// 这里直接提示服务器的错误信息
						uni.showToast({
							icon: 'error',
							title: msg
						})
						return
					}
					uni.showToast({
						icon: 'success',
						title: '员工入职成功！'
					})
					this.addStaffData.mobile = ''
					this.addStaffData.real_name = ''
					this.initData()
				}).catch(e => {
					uni.showToast({
						icon: 'error',
						title: '操作失败！'
					})
					console.error(e)
				})
			},
			toLeaveStaff (item) {
				this.currentStaff = item
				// item.realname
				this.leaveStaffVisible = true
			},
			leaveStf () {
				uni.showLoading({
					title: '正在请求服务器'
				})
				// 给工厂id赋值
				this.leaveStaffData.factory_id = this.factoryId
				this.leaveStaffData.user_id = this.currentStaff.id
				leaveStaff(this.leaveStaffData).then(res => {
					const { data, code, msg } = res.data
					if (code === 0) {
						// 这里直接提示服务器的错误信息
						uni.showToast({
							icon: 'error',
							title: msg
						})
						return
					}
					uni.showToast({
						icon: 'success',
						title: '员工离职成功！'
					})
					this.initData()
				}).catch(e => {
					uni.showToast({
						icon: 'error',
						title: '操作失败！'
					})
					console.error(e)
				})
			},
			getStaffHour (item) {
				uni.showLoading()
				this.currentStaff = item
				this.staffHourVisible = true
				this.staffHourData.user_id = this.currentStaff.user_id
				staffHour(this.staffHourData).then(res => {
					uni.hideLoading()
					const { data, code, msg } = res.data
					if (code === 0) {
						uni.showToast({
							icon: 'error',
							title: msg
						})
						return
					}
					this.staffHourContent = data
				}).catch(e => {
					uni.showToast({
						icon: 'error',
						title: '获取员工工时失败'
					})
				})
			}
		}
	}
</script>

<style lang="less">

</style>
